<template>
  <div class="container">
    <div>
      <el-button @click="def" type="primary">默认</el-button>
      <el-button @click="findT(signedType.NOT_SHIPPED)" type="primary">未收货</el-button>
      <el-button @click="findT(signedType.SINGED)" type="primary">已签收</el-button>
      <el-button @click="findT(signedType.CANCEL)" type="primary">已取消</el-button>
    </div>
    <div>
      <el-table :data="tableData" :default-sort="{ prop: 'createTime', order: 'descending' }" height="800px"
        style="width: 100%">
        <el-table-column prop="createTime" label="下单日期" sortable width="180" />
        <el-table-column prop="bookName" label="书名" width="120" />
        <el-table-column prop="accepter" label="收货人" width="120" />
        <el-table-column prop="address" label="收货地址" width="180" />
        <el-table-column prop="num" label="购买数量" width="120" />
        <el-table-column prop="price" label="价格" width="120" />
        <el-table-column prop="logistics" label="快递状态" width="120" />
        <el-table-column prop="name" fixed="right" label="Operations">
          <template #default="scop">
            <el-button type="success" size="small" @click="handleClick(scop.row.id)"
              :disabled="!(scop.row.signed === 0)">发货</el-button>
            <el-button type="warning" size="small" @click="cancle(scop.row.id, scop.row.accepter, scop.row.price)"
              :disabled="!(scop.row.signed === 0 || scop.row.signed === 1)">取消订单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="show">
      <el-pagination :page-size="pageSize" :pager-count="11" layout="prev, pager, next" :total="total"
        @current-change="currentChange" />
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, type TableColumnCtx } from 'element-plus'
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

import type { Order } from '../../api/Admin'
import { getOrderList, shiped, getCount, cancleApi, signedType, getListByType } from '../../api/Admin'

const show = ref(true)

const currentPage = ref(0)

const pageSize = ref(10)

const total = ref(100)

const status = ref(0)

const def = () => {
  status.value = 0
  show.value = true
  getCount().then(res => {
    total.value = res.data.data
    currentChange(1)
  })
}
const findT = (type: any) => {
  status.value = type + 1
  show.value = false
  getListByType(type).then(res => {
    tableData.value = res.data.data
  })
}

const cancle = (id: number, userName: string, price: string) => {

  cancleApi(id, userName, price).then(res => {
    if (res.data.code === 200) {
      ElMessage({
        message: res.data.msg,
        type: 'success'
      })

      if(status.value == 0) {
        getOrderList(currentPage.value, pageSize.value).then(res => {
            tableData.value = res.data.data
          })
      }else{
        findT(0)
      }
      
    } else {
      ElMessage({
        message: res.data.msg,
        type: 'error'
      })
    }

  })
}

getCount().then(res => {
  total.value = res.data.data
})

const currentChange = (page: number) => {
  getOrderList((page - 1) * pageSize.value, pageSize.value).then(res => {
    tableData.value = res.data.data
  })

}

getOrderList(currentPage.value, pageSize.value).then(res => {
  tableData.value = res.data.data
})


const handleClick = (data: any) => {

  shiped(data).then(res => {
    if (res.data.code === 200) {
      ElMessage({
        message: res.data.msg,
        type: 'success'
      })

      if(status.value == 0) {
        getOrderList(currentPage.value, pageSize.value).then(res => {
            tableData.value = res.data.data
          })
      }else{
        findT(0)
      }
      



    } else {
      ElMessage({
        message: res.data.msg,
        type: 'error'
      })
    }
  })


}

const tableData = ref<Array<Order>>()
</script>

<style scoped >
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
</style>